<template>
  <section class="content clear">
    <section class="inner-top">
      <span>应用管理</span>
    </section>
    <section class="inner-bottom">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input type="text" v-model="applicationName" placeholder="应用名称" size="small"></el-input>
        </el-col>
        <el-col :span="4">
          <el-input type="text" v-model="applicationCode" placeholder="应用code" size="small"></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="applicationStatus" placeholder="请选择应用状态" size="small">
            <el-option label="全部" :value="-1">
            </el-option>
            <el-option label="已启用" :value="1">
            </el-option>
            <el-option label="已禁用" :value="0">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="small" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="8" align="right">
          <el-button type="primary" size="small" @click="addOrEditApplication('add')">添加应用</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%;margin-top:20px;">
        <el-table-column type="index" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="code" label="应用code" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            {{scope.row.createTime | moment('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="状态">
          <template slot-scope="scope">
            {{scope.row.enabled?'已启用':'已禁用'}}
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="操作">
          <template slot-scope="scope">
            <router-link :to="{name: 'applicationDetail'}">
              <el-button type="text">权限</el-button>
            </router-link>
            <el-button type="text" v-if="scope.row.enabled" @click="openOrClose('close')">禁用</el-button>
            <el-button type="text" v-else @click="openOrClose('close')">启用</el-button>
            <el-button type="text" @click="addOrEditApplication('edit', scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <section class="content-page" style="margin-top:50px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current" :page-sizes="[10, 15, 20, 30]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
      </section>
    </section>
    <!-- 新增/编辑应用 -->
    <el-dialog :title="isAddOrEdit==='add'?'添加应用':'编辑应用'" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
      <el-form :model="applicationForm" status-icon :rules="applicationFromRules" ref="applicationForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="应用名称:" prop="name">
          <el-input type="text" v-model="applicationForm.name" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="应用code:" prop="code">
          <el-input type="text" v-model="applicationForm.code" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="应用icon:" prop="icon">
          <el-input type="text" v-model="applicationForm.icon" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="应用地址:" prop="url">
          <el-input type="text" v-model="applicationForm.url" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="应用类型:" prop="type">
          <el-input type="text" v-model="applicationForm.type" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="应用排序:" prop="sort">
          <el-input type="text" v-model="applicationForm.sort" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="应用状态：" prop="enabled">
          <el-radio-group v-model="applicationForm.enabled">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="应用描述：" prop="description">
          <el-input type="textarea" :rows="4" v-model="applicationForm.description" size="small" maxlength="100"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose('applicationForm')">取 消</el-button>
        <el-button type="primary" @click="sureAddOrEditApplication('applicationForm')">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
import {findAppByAppQueryUsingPOST, createAppUsingPOST} from '@api/systemManage'
export default {
  name: 'applicationManage',
  data () {
    return {
      isAddOrEdit: 'add', // add:新增；edit:编辑应用
      applicationForm: {
        name: null, // 应用名称
        code: null, // 应用code
        icon: null, // icon
        url: null, // 应用地址
        sort: null, // 排序
        type: null, // 类型
        enabled: '0', // (1:启用, 0:禁用)
        description: null // 应用描述
      },
      applicationFromRules: {
        name: [{required: true, message: '请输入应用名称', blur: 'blur'}],
        code: [{required: true, message: '请输入应用名称', blur: 'blur'}],
        icon: [{required: true, message: '请输入icon', blur: 'blur'}],
        url: [{required: true, message: '请输入应用地址', blur: 'blur'}],
        sort: [{required: true, message: '请输入应用排序', blur: 'blur'}],
        type: [{required: true, message: '请输入应用类型', blur: 'blur'}],
        enabled: [{required: true, message: '请选择应用状态', blur: 'blur'}],
        description: [{required: true, message: '请输入应用描述', blur: 'blur'}]
      },
      dialogVisible: false,
      applicationCode: null,
      applicationName: null,
      applicationStatus: -1,
      tableData: [
        {
          name: '1',
          address: '121212'
        }
      ],
      page: {
        current: 1,
        total: 0,
        size: 10
      }
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    initPage () {
      let params = {
        'code': this.applicationCode,
        'enabled': this.applicationStatus,
        'name': this.applicationName,
        'page': this.page.current,
        'size': this.page.size
      }
      if (this.applicationStatus === -1) { // 1:表示全部；不传enabled参数
        delete params.enabled
      }
      findAppByAppQueryUsingPOST(params).then(res => {
        if (res.status) {
          this.page.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    addOrEditApplication (type = 'add', rowData = null) {
      this.isAddOrEdit = type
      this.dialogVisible = true
      if (type === 'edit') { // 编辑时赋值
        this.applicationForm = rowData
      }
    },
    sureAddOrEditApplication (formName) {
      this.$refs[formName].validate(validate => {
        if (validate) {
          let params = {
            'code': this.applicationForm,
            // 'createTime': '2019-11-01T06:47:00.894Z',
            // 'creator': 'string',
            // 'deleted': 'string',
            'description': this.applicationForm.description,
            'enabled': Boolean(Number(this.applicationForm.enabled)),
            'icon': this.applicationForm.icon,
            // 'id': 0,
            // 'modifier': 'string',
            // 'modifyTime': '2019-11-01T06:47:00.894Z',
            'name': this.applicationForm.name,
            'sort': this.applicationForm.sort,
            'type': this.applicationForm.type,
            'url': this.applicationForm.url
            // 'version': 0
          }
          createAppUsingPOST(params).then(res => {
            if (res.status) {
              this.initPage()
              this.handleClose()
            }
          })
        }
      })
    },
    handleClose () {
      this.$refs['applicationForm'].resetFields()
      this.$refs['applicationForm'].clearValidate()
      this.dialogVisible = false
    },
    openOrClose (type = 'close') {

    },
    search () {
      this.page.current = 1
      this.page.size = 10
      this.initPage()
    },
    handleSizeChange (val) {
      this.page.size = val
      this.initPage(1)
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.initPage(val)
    }
  }
}
</script>
